.diceGameJ {
  // width: 100%;
  // height: 100%;
}

.diceWrapper {
  position: relative;
  width: 500px;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;

  &::before,
  &::after {
    clear: both;
  }

  .dice {
    position: relative;
    width: 100px;
    height: 100px;
    transition: all 0.5s;
    transform-style: preserve-3d;
    // transform: rotate3d(1, 1, 1, 0deg);
    // transform: random-rotate 10s infinite linear;
    // animation: dice-rotate-2 2s linear 1;
    animation: var(--animation-name) 2s linear 1 forwards;
    animation-timing-function: ease-out;
  }

  .diceOne,
  .diceTwo,
  .diceThree,
  .diceFour,
  .diceFive,
  .diceSix {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    font-size: 50px;
    font-weight: bold;
    border-radius: 10px;
    border: 1px solid #CCC;
    box-shadow: 1px 0 6px #CCC;
    // transition: all 0.2s ease-in-out 0.05s;
    transform-style: preserve-3d;
    background-color: #FFF;
    // backface-visibility: inherit;
  }

  .diceOne {
    transform: translateZ(50px);
  }

  .diceTwo {
    transform: translateX(-50px) rotateY(90deg);
  }

  .diceThree {
    transform: translateY(50px) rotateX(90deg);
  }

  .diceFour {
    transform: translateX(50px) rotateY(-90deg);
  }

  .diceFive {
    transform: translateY(-50px) rotateX(-90deg);
  }

  .diceSix {
    transform: translateZ(-50px) rotateY(180deg);
  }
}

@keyframes dice-rotate-1 {
  0% { transform: rotateX(0deg) rotateY(0deg); }
  95% { transform: rotateX(3600deg) rotateY(3600deg); }
  100% { transform: rotate3d(0, 0, 0, 180deg); }
}
@keyframes dice-rotate-2 {
  0% { transform: rotateX(0deg) rotateY(0deg); }
  95% { transform: rotateX(3600deg) rotateY(3600deg); }
  100% { transform: rotate3d(1, 0, -1, 180deg); }
}
@keyframes dice-rotate-3 {
  0% { transform: rotateX(0deg) rotateY(0deg); }
  95% { transform: rotateX(3600deg) rotateY(3600deg); }
  100% { transform: rotate3d(0, 1, 1, 180deg); }
}
@keyframes dice-rotate-4 {
  0% { transform: rotateX(0deg) rotateY(0deg); }
  95% { transform: rotateX(3600deg) rotateY(3600deg); }
  100% { transform: rotate3d(1, 0, 1, 180deg); }
}
@keyframes dice-rotate-5 {
  0% { transform: rotateX(0deg) rotateY(0deg); }
  95% { transform: rotateX(3600deg) rotateY(3600deg); }
  100% { transform: rotate3d(0, 1, -1, 180deg); }
}
@keyframes dice-rotate-6 {
  0% { transform: rotateX(0deg) rotateY(0deg); }
  95% { transform: rotateX(3600deg) rotateY(3600deg); }
  100% { transform: rotate3d(1, 0, 0, 180deg); }
}
